<template>
	<view class="container">
		<view class="stored_value_box">
			<view class="stored_value_inp">
				<view class="title">儲值金額</view>
				<view class="inp">$<input type="number" v-model="money" placeholder="請輸入"
						placeholder-style="font-size:26rpx;color:#999">
				</view>
				<view class="stored_value_btn" @tap="recharge_now">立即儲值</view>
			</view>
		</view>
		<view class="illustrate">儲值說明</view>
		<view class="illustrate_btns">
			<view v-for="item in list" :key="item.id" class="illustrate_item">
				<text
					@click="rechargeSend(item)">儲值{{Number(item.price)}}</text><text>送{{Number(item.send_price)}}</text>
			</view>

		</view>

		<u-popup :show="showPayType" class="popup" mode="bottom" @close="showPayType=false">
			<view class="popup_pay" style="height: 1088rpx;width: 100%;background: #fff;">
				<view style="font-size: 30rpx;text-align: center;">儲值金額</view>
				<view style="color: #FA533D;font-size: 46rpx;font-weight: bold;text-align: center;">
					${{form?form.price:money}}</view>
				<view style="margin: 19rpx 0 31rpx 30rpx;">選擇付款方式</view>
				<view class="payment_method">
					<radio-group @change="radioChange" class="radio_box">
						<label v-for="(item,index) in paymentMethod" :key="item.value">
							<text :class="{active:radioChecked==item.value}">{{item.value}}</text>
							<radio :value="item.value" :checked="currentCheck==index" color="#39B19D" />
						</label>
					</radio-group>
				</view>
				<view class="confirm_payment" @tap="confirm_payment">確定支付</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import store from "@/store/index.js"
	import {
		recharge,
		getRechargeWelfareList
	} from '@/api/index.js'
	import {
		getUserStoreInfo
	} from '@/api/me.js'
	export default {
		data() {
			return {
				storeDetails: '',
				money: '',
				showPayType: false,
				paymentMethod: [
					// {
					// 	value: "信用卡/轉帳 藍新",
					// 	checked: false
					// },
					// {
					// 	value: "信用卡/轉帳 綠界",
					// 	checked: false
					// },
				],
				currentCheck: 0,
				radioChecked: "",
				list: [],
				form: null,
				flag: true, // true--通過立即儲值按鈕去儲值   false--通過儲值說明去儲值
				first: false,
			};
		},
		onLoad() {
			this.storeDetails = store.state.storeDetails

			this.getRechargeWelfareListFn(this.storeDetails.id)

			getUserStoreInfo({
				store_id: this.storeDetails.id
			}).then(res => {
				this.setPayment(res.data.pay_type_list)
			})
		},
		methods: {
			recharge_now() {
				this.radioChecked = this.paymentMethod[0].value
				if (this.money == "" || this.money == 0) {
					uni.showToast({
						title: '請輸入金額',
						icon: 'none',
						duration: 2000
					})
				} else {
					this.flag = true
					this.showPayType = true
				}

			},
			radioChange(e) {
				this.radioChecked = e.detail.value

				this.paymentMethod.forEach((item, index) => {
					if (item.value == this.radioChecked) {
						this.currentCheck = index
						// console.log(index,"1111")
					}
				})

				// console.log(this.currentCheck,"222")

			},
			confirm_payment() {
				let payType = ''
				switch (this.radioChecked) {
					case '信用卡/轉帳 藍新':
						payType = 1;
						break;
					case '信用卡/轉帳 綠界':
						payType = 2;
						break;
					case 'Line Pay':
						payType = 4;
						break;
				}

				if (this.flag) {
					recharge({
						store_id: this.storeDetails.id,
						pay_type: payType, //  1--信用卡付款  2--ATM付款  3--超商付款  4--line pay  5--儲值機
						money: this.money
					}).then(res => {
						console.log(res, '支付')
						if (payType == 1) {
							this.confirm_payment1(res)
						} else if (payType == 4) {
							// console.log(res.data, 'line pay')
							this.confirm_payment4(res)
						} else if (payType == 2) {
							this.confirm_payment2(res)
						}
					})
				} else {
					const params = {
						store_id: this.storeDetails.id,
						pay_type: payType,
						money: this.form.price,
						config_id: this.form.id,
						send_price: this.form.send_price,
					}
					recharge(params).then(res => {
						console.log(res)
						// return
						if (payType == 1) {
							this.confirm_payment1(res)
						} else if (payType == 4) {
							// console.log(res.data, 'line pay')
							this.confirm_payment4(res)
						} else if (payType == 2) {
							this.confirm_payment2(res)
						}
					})
				}

			},
			confirm_payment1(res) {
				if (res.code == 1) {
					uni.navigateTo({
						url: `/pages/book_now/outward_payment/outward_payment?payData=${JSON.stringify(res.data)}&type=1`
					})
					this.showPayType = false
					this.money = ""
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}


			},
			confirm_payment4(res) {
				/*#ifdef H5*/
				plus.runtime.launchApplication({
					// pname: 'jp.naver.line.android',
					// pname:'com.tencent.mm',
					action: res.data,
					// action: 'weixin://',
				}, (e) => {
					console.log('error', e.message)
				})
				/*#endif*/

				/*#ifdef APP-PLUS*/
				console.log('APP端', res.data)

				let isApp = ''

				if (plus.os.name == 'Android') {
					// console.log('android')
					isApp = plus.runtime.isApplicationExist({
						// pname: 'com.linepaycorp.talaria',
						pname: 'jp.naver.line.android',
						action: res.data,
						// action: 'weixin://',
					})

					if (isApp) {
						console.log('app已安裝')
						plus.runtime.launchApplication({
							pname: 'jp.naver.line.android',
							// pname:'com.tencent.mm',
							action: res.data,
							// action: 'weixin://',
						}, (e) => {
							console.log('error', e.message)
						})
					} else {
						uni.showToast({
							title: '未安裝Line Pay',
							icon: 'none'
						})
					}

				} else if (plus.os.name == 'iOS') {
					console.log('ios')
					plus.runtime.launchApplication({
						// pname: 'jp.naver.line.android',
						action: res.data,
					}, (e) => {
						console.log('error', e.message)
						uni.showToast({
							title: '未安裝Line Pay',
							icon: 'none'
						})
					})
				}
				/*#endif*/
			},
			confirm_payment2(res) {
				console.log(res, '緑界')
				if (res.code == 1) {
					uni.setStorageSync('MerchantTradeNo', res.data.MerchantTradeNo)
					uni.navigateTo({
						url: `/pages/book_now/outward_payment/outward_payment?form=${JSON.stringify(res.data)}&type=2`
					})
					this.showPayType = false
					this.money = ""
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}

			},
			getRechargeWelfareListFn(id) {
				getRechargeWelfareList({
					store_id: id
				}).then(res => {
					console.log(res, '列表')
					this.list = res.data
				})
			},
			rechargeSend(item) {
				this.form = item
				this.flag = false
				this.showPayType = true
			},
			setPayment(arr) {
				if (this.first) return
				this.first = true
				arr.forEach(item => {
					switch (item) {
						case 1:
							this.paymentMethod.push({
								value: '信用卡/轉帳 藍新',
								checked: false
							})
							if (this.systemInfo.platform == 'ios' && this.storeDetails.id == 76) {
								this.paymentMethod.push({
									value: 'Apple pay',
									checked: false
								})
							}
							break;
						case 2:
							this.paymentMethod.push({
								value: '信用卡/轉帳 綠界',
								checked: false
							})
							break;
						case 4:
							if (this.storeDetails.id == 76) {
								this.paymentMethod.push({
									value: 'Line Pay',
									checked: false
								})
							}
							break;
						case 9:
							if (this.storeDetails.id == 76) {
								this.paymentMethod.push({
									value: 'Apple pay',
									checked: false
								})
							}

							break;
						case 10:
							if (this.systemInfo.platform == 'Android') {
								this.paymentMethod.push({
									value: 'Google pay',
									checked: false
								})
							}
							break;
					}
				})

			},
		}
	}
</script>

<style lang="less">
	.container {
		background: #F3F5F9;
		padding: 30rpx;
		box-sizing: border-box;
		height: calc(100vh - 90rpx);

		.stored_value_box {
			height: 387rpx;
			border-radius: 16rpx;
			border: 1rpx solid #39B19D;
			padding: 24rpx 26rpx;
			box-sizing: border-box;
			background-color: #F8FDFB;

			.stored_value_inp {
				height: 122rpx;
				border: 1rpx solid #39B19D;
				border-radius: 16rpx;
				padding: 7rpx 15rpx;
				box-sizing: border-box;

				.title {
					font-size: 26rpx;
					margin-bottom: 31rpx;
				}

				.inp {
					font-size: 26rpx;
					color: #999;
					display: flex;
					align-items: center;

					input {
						margin-left: 10rpx;
						color: #000;
						flex: 1;
					}
				}

				.stored_value_btn {
					width: 227rpx;
					height: 93rpx;
					background: #39B19D;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					opacity: 1;
					border: 1rpx solid #39B19D;
					margin: 105rpx auto 0;
					line-height: 93rpx;
					color: #fff;
					text-align: center;
				}
			}


		}

		.illustrate {
			font-size: 26rpx;
			margin: 26rpx;
		}

		.illustrate_btns {
			margin: 33rpx 0 0 26rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.illustrate_item {
				width: 30%;
				height: 95rpx;
				border-radius: 16rpx;
				border: 1rpx solid #39B19D;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-around;
				margin-bottom: 33rpx;
				font-size: 26rpx;
			}
		}

		.popup_pay {

			padding-top: 145rpx;
			box-sizing: border-box;

			.radio_box {
				display: flex;
				flex-direction: column;
				padding: 0 67rpx 0 46rpx;
				box-sizing: border-box;

				label {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 33rpx;

					.active {
						color: #39B19D;
					}
				}
			}

			.confirm_payment {
				width: 476rpx;
				height: 110rpx;
				background: #39B19D;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				opacity: 1;
				font-size: 36rpx;
				line-height: 110rpx;
				text-align: center;
				color: white;
				margin: 97rpx auto;
			}

		}
	}
</style>